<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>Hiring-</title>
       
    </head>
    <body>
        <div class="container">
            省/直辖市：<select id="province"></select>
            城市：<select id="city"></select>
            区/县：<select id="area"></select>
        </div>
        
        <script>
            var province = $('#province');
            var city = $('#city');
            var area = $('#area');
            
            //  JSON字符串 -> JavaScript语法
            var provinces = $.parseJSON('${provinceListStr}');
            var provinceOptions = [];
            for (var i = 0; i < provinces.length; i++) {
                if (provinces[i].province == '重庆市') {
                    provinceOptions.push('<option value=' + provinces[i].provinceId + ' selected>' + provinces[i].province + '</option>');
                } else {
                    provinceOptions.push('<option value=' + provinces[i].provinceId + '>' + provinces[i].province + '</option>');
                }
            }
            province.append(provinceOptions.join(''));
            
            var defaultCitys = $.parseJSON('${cityListStr}');
            var defaultCityOptions = [];
            for (var i = 0; i < defaultCitys.length; i++) {
                defaultCityOptions.push('<option value=' + defaultCitys[i].cityId + '>' + defaultCitys[i].city + '</option>');
            }
            city.append(defaultCityOptions.join(''));       
            
            var defaultAreas = $.parseJSON('${areaListStr}');
            var defaultAreaOptions = [];
            for (var i = 0; i < defaultAreas.length; i++) {
                if (defaultAreas[i].area == '九龙坡区') {
                    defaultAreaOptions.push('<option value=' + defaultAreas[i].areaId + ' selected>' + defaultAreas[i].area + '</option>');
                } else {
                    defaultAreaOptions.push('<option value=' + defaultAreas[i].areaId + '>' + defaultAreas[i].area + '</option>');
                }
            }
            area.append(defaultAreaOptions.join('')); 
            
            // 选择province显示province对应的城市
            province.change(function() {
                var param = {
                    command : 'listCityByProvinceId',
                    provinceId : this.value,
                    time: new Date().getTime()
                }
                $.get('<%=request.getContextPath()%>/CommonServlet', param, function(datas) {
                    // 清空city的所有option
                    city.empty();
                    // 再追加城市信息
                    var cityOptions = [];
                    for (var i = 0; i < datas[0].length; i++) {
                        cityOptions.push('<option value=' + datas[0][i].cityId + '>' + datas[0][i].city + '</option>');
                    }
                    city.append(cityOptions.join(''));    
                    // 清空area的所有option
                    area.empty();
                    // 再追加第一个城市所对应地区信息
                    var areaOptions = [];
                    for (var i = 0; i < datas[1].length; i++) {
                        areaOptions.push('<option value=' + datas[1][i].areaId + '>' + datas[1][i].area + '</option>');
                    }
                    area.append(areaOptions.join(''));    
                }, 'json')
            });
            
            
            city.change(function() {
                // do something...
            })
        </script>
    </body>
</html>